<template>
  <div id="mainDiv">
  <div id="orders">
    <div class="chefTitle">
      <div class="el-icon-fork-spoon">厨师订单</div>
    </div>
    <hr>
    <div class="orderInfo">
      <div>
        <span>订单编号</span>
        <span>用户</span>
        <span>订单开始时间</span>
        <span>订单结束时间</span>
        <span>金额</span>
        <span>订单状态</span>
      </div>
    </div>
    <div class="orderInfo"  v-for="(cheforder,cheforderindex) in chef.cheforders">
      <div>
        <span>{{cheforder.cuno}}</span>
        <span>{{cheforder.user.uname}}</span>
        <span>{{procesDate(cheforder.cubegindate)}}</span>
        <span>{{procesDate(cheforder.cuenddate)}}</span>
        <span>{{cheforder.cuprice}}</span>
        <span @click="processOrder(orderindex)">{{cheforder.custate}}</span>
        <template slot-scope="scope">
            <span>  <el-button
              size="mini"
              @click="allow(scope.$index, scope.row)">同意
            </el-button>
            <el-button
              size="mini"
              type="danger"
              @click="deny(scope.$index, scope.row)">拒绝
            </el-button>
               </span>
        </template>
      </div>
    </div>
    <!--<el-button-->
      <!--size="mini"-->
      <!--@click="getResOrder()">同意-->
    <!--</el-button>-->

  </div>
  </div>
</template>

<script>
  import api from "../../../../../axios/api";
  import utilsFD from "../../../../../static/js/utils/index.js"

    export default {
        name: "cheforder",
      data(){
          return{
            chef:[]
          }
      },
      methods:{
        processOrder(index){
          if (this.restaurant.orderForm[index].uresState.trim()=="待付款"){
            this.confirmDialogIsShow = true;
            this.$nextTick(() => {
              console.log( this.$refs.showAddOrder)
              this.$refs.showAddOrder.init(this.restaurant.orderForm[index]);
            })}
        },
        procesDate(date){
          return utilsFD.FD.Fd().initCNDateFromlong(date);
        },
        setDataFromAxios: function () {
          console.log("----------55----------")
          console.log("/api/chefController/selectChefWithorderAndUser/7001")
          //为什么要封装一下方法 1.每个vue组件有自己的一些参数处理，简化调用本来这个setDataFromAxios这个方法属于api 重新封装就属于当前页面
          api.setDataFromAxios( "/api/chefController/selectChefWithorderAndUser/7001", null, "post")
            .then(res => {
              this.chef = res.t;
              console.log(res)
              // console.log(this.chefs.name)
            });//.then方法 就是当服务器有返回的时候执行回调函数，对比jquery的ajax success:function（data）
        }
      },
      //vue init方法 当前页面初始化就自动执行的方法 一般用于页面初始化就读取数据
      created:function () {
        this.setDataFromAxios();//1.创建页面的时候 调用自定义的数据请求方法  而数据请求方法把得到数据赋值给了当前页面的变量
      }
    }
</script>

<style scoped type="text/css">
  #mainDiv{border:solid 0px;width:1000px;height:600px;margin-left:auto;margin-right: auto;
    font-family: "微软雅黑";}
  .chefTitle{ font-size: 17px; width :120px; height :24px}
  .el-icon-fork-spoon{ font-weight :600;}
  #orders > .orderInfo > div> span{display: inline-block;height: 35px;padding: 2px 0;text-align: center;line-height: 39px}
  #orders > .orderInfo > div> span:nth-child(1){width: 300px;}
  #orders > .orderInfo > div> span:nth-child(2){width: 120px; }
  #orders > .orderInfo > div> span:nth-child(3){width: 130px; }
  #orders > .orderInfo > div> span:nth-child(4){width: 130px; }
  #orders > .orderInfo > div> span:nth-child(5){width: 130px; }
  #orders > .orderInfo > div> span:nth-child(6){width: 130px; }








</style>
